<template>
	<div class="photo">
		<el-carousel :interval="4000" type="card" height="200px">
			<el-carousel-item v-for="item in this.photoList" :key="item">
				<!-- 	<h3>{{ item.id }}</h3> -->
				<div>
					<img :src=item.url width="100%" height="400rem">
				</div>
			</el-carousel-item>
		</el-carousel>
		<el-row :gutter="10">
			<el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6" v-for="item in this.photoList" :key="item">
				<div class="grid-content bg-purple" @click="open_search(item)">
					<img :src=item.url width="100%" height="240rem">
				</div>
			</el-col>
		</el-row>

		<el-dialog title="预览" :visible.sync="delVisible" width="50%" center>
			<img :src=selectitem.url width="100%" height="100%">
			<!-- <div class="del-dialog-cnt">删除不可恢复，是否确定删除？</div>
			<span slot="footer" class="dialog-footer">
				<el-button @click="delVisible = false">取 消</el-button>
				<el-button type="primary" @click="deleteRow">确 定</el-button>
			</span> -->
		</el-dialog>
	</div>
</template>

<script>
	import photojs from '../../assets/js/photo_banner.js'
	export default {
		name: 'learn',
		data() {
			return {
				photoList: [],
				delVisible: false,
				selectitem: {},
			};
		},
		//初期化页面
		created() {
			this.photoList = photojs.photo_banner;
		},
		filters: {},
		// 监听
		computed: {},
		methods: {
			open_search(item) {
				this.selectitem = item;
				this.delVisible = true;
			},
		},
		metaInfo: {
			title: '自由的个人博客——素材图片', // set a title
			meta: [{ // set meta
				name: '收集图片,图片，背景图片,banner,美景,免费非商业图片',
				content: '收集各种图片为了自己学习和观看使用,版权归原作者所有。'
			}],
			link: [{ // set link
				rel: 'asstes',
				href: 'http://www.mxdqh.top/'
			}]
		},
	}
</script>
<style>
	.photo {
		width: 100%;
		margin-top: 1rem;
	}

	/* .photo .el-carousel__item h3 {
		color: #475669;
		font-size: 14px;
		opacity: 0.75;
		line-height: 200px;
		margin: 0;
	}

	.photo .el-carousel__item:nth-child(2n) {
		background-color: #99a9bf;
	}

	.photo .el-carousel__item:nth-child(2n+1) {
		background-color: #d3dce6;
	}
 */
	.photo .el-col {
		border-radius: 4px;
		margin-bottom: 10px;
	}

	/* .photo .bg-purple-dark {
		background: #99a9bf;
	}

	.photo .bg-purple {
		background: #d3dce6;
	}

	.photo .bg-purple-light {
		background: #e5e9f2;
	} */

	.photo .grid-content {
		border-radius: 4px;
		border: 4px solid #EBEEF5;
	}
</style>
